<template>
  <div>
    <div class="top_all">
      <div class="top_headimg">
        <img :src="this.headimgurl" alt="" class="headimg">
      </div>
      <div class="top_name">
        <p>{{this.nickname}}</p>
        <p style="margin-top:10px;color:orange">{{this.sm_title}}</p>
      </div>
    </div>
    <div class="binding_mobile">
      <div class="binding_mobile_title">
        <hd-svg-icon name="hd-shouji" size=".9rem" style="float:left" color="#FF2D2D"></hd-svg-icon>
        <div style="padding-bottom:20px;float:left;padding-top:18px;">实名认证手机号码</div>
      </div>
      <div>
      <yd-cell-group>
        <yd-cell-item>
          <span slot="left">手机号码：</span>
          <yd-input slot="left" v-model="mobile" required :show-success-icon="false" :show-error-icon="false" regex="mobile" placeholder="请输入手机号码"></yd-input>
          <yd-button type="warning" slot="right" @click.native="show1 = true">获取验证码</yd-button>
        </yd-cell-item>
      </yd-cell-group>
      <yd-cell-group>
        <yd-cell-item>
          <span slot="left">验证密码：</span>
          <yd-input slot="right" type="password" v-model="password" placeholder="请输入验证密码"></yd-input>
        </yd-cell-item>
      </yd-cell-group>
      </div>
    </div>

    <!-- 弹出框输入验证码 -->
    <yd-popup v-model="show1" position="center" width="60%">
      <div>
        <yd-flexbox-item>
          <yd-cell-group class="demo-small-pitch">
            <yd-flexbox>
              <yd-flexbox-item>
                <yd-cell-item>
                  <yd-input slot="right" max="4" v-model="code" type="text" placeholder="验证码"  :showErrorIcon="true" :showSuccessIcon="false" :showRequiredIcon="false"></yd-input>
                </yd-cell-item>
              </yd-flexbox-item>
              <yd-flexbox-item>
                <img @click="clickValidateCode" :src="codeimg" class="codeimg"> 
              </yd-flexbox-item>
            </yd-flexbox>
          </yd-cell-group>
        </yd-flexbox-item>
      </div>
      <p style="text-align: center;">
          <yd-button @click.native="show1 = false">确定</yd-button>
      </p>
      </yd-popup>
  </div>
</template>
<script>
// import GUID from 'hdc/guid'

export default {
  name: 'member_reg',
  data() {
    return {
      mobile: '',
      password: '',
      nickname: '',
      headimgurl: '',
      sm_title: '',
      show1: false,
      codeimg: '',
      code: '',
      result: '',
      mobilecode: '',
      guid2: ''
    }
  },
  mounted: function() {
    this.load();
    this.clickValidateCode()
  },
  methods: {
    load() {
      this.hdAjax({
        url: this.API.myInfo,
        dataType: 'json',
        success: (resultData) => {
          if (resultData.status === 1) {
            this.nickname = resultData.result.nickname;
            this.headimgurl = resultData.result.headimgurl;
            if (resultData.result.idcard !== '' && resultData.result.idcard !== null) {
              this.sm_title = '实名会员'
            } else {
              this.sm_title = '尚未实名认证'
            }
            if (resultData.result.mobile === '' || resultData.result.mobile === null) {
              this.hdAjax({
                type: 'get',
                url: this.API.getFriendlyReminder,
                success: (resultData) => {
                  if (resultData.status === 1) {
                    if (resultData.result !== '' && resultData.result !== null) {
                      this.$dialog.confirm({
                        title: '温馨提示',
                        mes: resultData.result,
                        opts: () => {
                          // this.$dialog.toast({mes: '你点了确定', timeout: 1000});
                        }
                      });
                    }
                  }
                }
              })
            } else {
              this.mobile = resultData.result.mobile
            }
          } else {
            this.$dialog.toast({mes: resultData.msg})
          }
        }
      })
    },
    clickValidateCode () {
      this.codeimg = this.API.verify
    }
  }
}
</script>

<style scoped>
  .top_all{
    width:100%;
    height:180px;
  }
  .top_headimg{
    width:130px;
    height:130px;
    margin-top:30px;
    margin-left:30px;
    float:left;
  }
  .headimg{
    width:130px;
    height:130px;
    border-radius: 80px;
  }
  .top_name{
    float:left;
    font-size:.3rem;
    margin-top:80px;
    margin-left:30px;
  }
  .binding_mobile{
    width:100%;
    height:220px;
    border-top:10px solid #F0F0F0;
    border-bottom:10px solid #F0F0F0;
  }
  .binding_mobile_title{
    font-size:.3rem;
    color:#FF2D2D;
    width:100%;
    height:57px;
  }
  .codeimg{
        width:120px;
        height:40px;
    }
</style>
